﻿<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Vue.js 组件练习</title>
    <link href="../css/demo.css" rel="stylesheet" />
    <link href="../css/dialog.css" rel="stylesheet" />
    <link href="../css/iconfont.css" rel="stylesheet" />
    <meta charset="utf-8" />
</head>
<body>
    <div style="float:left;" class="form-group">
        <a href="vue.html">vue.html</a><br />
        <a href="vue-component.html">vue-component.html</a>
    </div>

    <div>
        <h2 style="">Vue.js 组件入门</h2>
    </div>

    <div id="app">
        <fieldset>
            <legend>全局注册组件  语法: Vue.component(组件标签,组件构造器)</legend>
            <span style="color:red;">(这是注册的全局组件)</span>
            <globalcomponent></globalcomponent>
        </fieldset>

        <fieldset>
            <legend>局部注册组件</legend>
            <span style="color:red;">(这是注册的局部组件)</span>
            <localcomponent></localcomponent>
        </fieldset>

        <fieldset>
            <legend>父组件和子组件</legend>
            <span style="color:red;"></span>
            <p-component></p-component>

        </fieldset>

        <fieldset>
            <legend>props基础示例</legend>
            <span style="color:red;">prop默认是单向绑定：当父组件的属性变化时，将传导给子组件，但是反过来不会。这是为了防止子组件无意修改了父组件的状态</span>

            <props-component v-bind:people="people">
            </props-component>
        </fieldset>
    </div>

    <div id="app2">

        <fieldset>
            <legend>单个Slot</legend>

            <templatecomponent>
                <h1>Hello Vue.js!</h1>
            </templatecomponent>

            <templatecomponent>

            </templatecomponent>

        </fieldset>

        <fieldset>
            <legend>指定名称的Slot</legend>

            <modal-dialog v-bind:show="show" v-bind:class="dialogClass">
                <div class="close rotate" slot="close">
                    <span class="iconfont iconfont-cuowu" @click="closeDialog"></span>
                </div>

                <header class="dialog-header" slot="header">
                    <h1 class="dialog-title">提示信息</h1>
                </header>

                <div class="dialog-body" slot="body">
                    <p>你想在对话框中放什么内容都可以！</p>
                    <p>你可以放一段文字，也可以放一些表单，或者是一些图片。</p>
                </div>

                <footer class="dialog-footer" slot="footer">
                    <input type="button" name="name" value="关闭" @click="closeDialog" />
                </footer>
            </modal-dialog>

            <input type="button" class="btn-info" @click="openDialog('dialog-info')" value="提示信息对话框" />
            <input type="button" class="btn-success" @click="openDialog('dialog-success')" value="提示成功对话框" />
            <input type="button" class="btn-warning" @click="openDialog('dialog-warning')" value="提示警告对话框" />
            <input type="button" class="btn-error" @click="openDialog('dialog-error')" value="提示错误对话框" />
        </fieldset>
    </div>

    <div id="app3">
        <fieldset>
            <legend>父子组件之间的访问</legend>

            <parent-component></parent-component>
        </fieldset>
    </div>

    <template id="parent-component">
        <child-component1></child-component1>
        <child-component2></child-component2>
        <input type="button" value="显示子组件的数据" @click="showChildComponentData" />
    </template>

    <template id="child-component1">
        <h2>This is child component 1</h2>
    </template>

    <template id="child-component2">
        <h2>This is child component 2</h2>
    </template>

    <template id="props-component">
        <table>
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                </tr>
            </thead>
            <tr v-for="person in people">
                <td>{{ person.name }}</td>
                <td>{{ person.age }}</td>
                <td>{{ person.sex }}</td>
            </tr>
        </table>
    </template>

    <template id="templatecomponent">
        <div style="margin:0px 0px 10px 0px;">
            <h2>This is a component!</h2>
            <slot>如果没有分发内容，则显示slot中的内容</slot>
            <p>Say something...</p>
        </div>
    </template>

    <template id="dialog-template">
        <div class="dialogs">
            <div class="dialog" v-bind:class="{ 'dialog-active': show }">
                <div class="dialog-content">
                    <slot name="close"></slot>
                    <slot name="header"></slot>
                    <slot name="body"></slot>
                    <slot name="footer"></slot>
                </div>
            </div>
            <div class="dialog-overlay"></div>
        </div>
    </template>
    <script src="../script/vue/vue 1.0.js"></script>
    <!--<script src="../script/vue/vue 2.0.js"></script>-->

    <script>
        // 1.创建一个组件构造器
        Vue.component("globalcomponent", {
            template: '<span>{{name}}</span>',
            data: function () {
                return {
                    name: '组件的注册是全局的，这意味着该组件可以在任意Vue示例下使用.'
                }
            }
        });
        
        //父组件和子组件
        var child = Vue.extend({
            template: '<span>这是一个子组件</span>'
        });

        // 全局注册Parent组件
        Vue.component('p-component', {
            template: '<span>这是一个父组件<child-component></child-component></span>',
            components: {
                'child-component': child
            }
        });

        Vue.component('templatecomponent', {
            template: '#templatecomponent'
        });

        new Vue({
            el: '#app',
            //局部注册组件
            data: {
                name: 'keepfool',
                age: 28,
                people: [{
                    name: 'Jack',
                    age: 30,
                    sex: 'Male'
                }, {
                    name: 'Bill',
                    age: 26,
                    sex: 'Male'
                }, {
                    name: 'Tracy',
                    age: 22,
                    sex: 'Female'
                }, {
                    name: 'Chris',
                    age: 36,
                    sex: 'Male'
                }]
            },
            components: {
                'localcomponent': Vue.extend({
                    template: '<span>{{name}}</span>',
                    data: function () {
                        return {
                            name: '局部组件只能在当前注册元素下面使用.'
                        }
                    }
                }),
                'props-component': {
                    template: '#props-component',
                    props: ['people']
                }
            }
        });


        //~~~~~~~~~~~~~~~~~~~~~~~~~单个Slot
        Vue.component('modal-dialog', {
            template: '#dialog-template',
            props: ['show', 'closeDialog'],
            methods: {
                close: function () {
                    this.show = false
                }
            }
        });

        new Vue({
            el: '#app2',
            data: {
                show: false,
                dialogClass: 'dialog-info'
            },
            methods: {
                openDialog: function (cls) {
                    this.show = true;
                    this.dialogClass = cls;
                },
                closeDialog: function () {
                    this.show = false;
                }
            }
        });

        //~~~~~~~~~~~~~~~~~~~~~~~~~end


        //~~~~~~~~~~~~~~~~~~~~~~~~~父子组件之间的访问
        Vue.component('parent-component', {
            template: '#parent-component',
            components: {
                'child-component1': {
                    template: '#child-component1',
                    data: function () {
                        return {
                            msg: 'child component 11111'
                        }
                    }
                },
                'child-component2': {
                    template: '#child-component2',
                    data: function () {
                        return {
                            msg: 'child component 22222'
                        }
                    }
                }
            },
            methods: {
                showChildComponentData: function () {
                    for (var i = 0; i < this.$children.length; i++) {
                        alert(this.$children[i].msg)
                    }
                }
            }
        });

        new Vue({
            el: '#app3'
        });
        //~~~~~~~~~~~~~~~~~~~~~~~~~end



    </script>
</body>
</html>
